<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin:10px 0;">
        <div slot="header" class="header">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="销售额" name="first"></el-tab-pane>
                <el-tab-pane label="访问量" name="second"></el-tab-pane>
            </el-tabs>
            <!-- 右侧结构 -->
            <div class="right">
                <span @click="today">今日</span>
                <span @click="week">本周</span>
                <span @click="month">本月</span>
                <span @click="year">今年</span>
                <el-date-picker v-model="dateArr" type="daterange" range-separator="-" start-placeholder="入住时间"
                    end-placeholder="离开时间" :size="size" value-format="YYYY-MM-DD" />
            </div>
        </div>
        <!-- 卡片身体部分 -->
        <el-row :gutter="20">
            <el-col :span="18" :offset="0">
                <v-chart :option="getOption()" style="height: 400px;"></v-chart>
            </el-col>
            <el-col :span="6" :offset="0">
                <h6>门店{{activeName=='first'?'销售额':'访问量'}}排名</h6>
                <ul v-show="activeName == 'first'">
                    <li v-for="(item,index) in arr" :key="index">
                        <span :class="{active:item.no<=3}">{{item.no}}</span>
                        <span>{{item.name}}</span>
                        <span>{{item.count}}</span>
                    </li>
                </ul>
                <ul v-show="activeName != 'first'">
                    <li v-for="(item,index) in arr1" :key="index">
                        <span :class="{active:item.no<=3}">{{item.no}}</span>
                        <span>{{item.name}}</span>
                        <span>{{item.count}}</span>
                    </li>
                </ul>
            </el-col>
        </el-row>
    </el-card>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
let activeName = ref('first')
// 存储日历时间
let dateArr = ref([])

// 点击今日的按钮
const today = () => {
    let start = dayjs().format('YYYY-MM-DD')
    let end = dayjs().format('YYYY-MM-DD')
    dateArr.value = [start, end]
}

// 点击本周的按钮
const week = () => {
    let start = dayjs().day(1).format('YYYY-MM-DD')
    let end = dayjs().day(7).format('YYYY-MM-DD')
    dateArr.value = [start, end]
}
// 点击本月的按钮
const month = () => {
    let start = dayjs().startOf('month').format('YYYY-MM-DD')
    let end = dayjs().endOf('month').format('YYYY-MM-DD')
    dateArr.value = [start, end]
}
// 点击本月的按钮
const year = () => {
    let start = dayjs().startOf('year').format('YYYY-MM-DD')
    let end = dayjs().endOf('year').format('YYYY-MM-DD')
    dateArr.value = [start, end]
}

// 柱状图的配置回调
const getOption = () => {
    return {
        //标题
        title:{
            text:activeName.value=='first'?'销售额':'访问量',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: props.x,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '50%',
                itemStyle:{
                    color:'green'
                },
                data: activeName.value == 'first'?props.saleArr:props.visiteArr
            }
        ]
    };
}

let props = defineProps(['saleArr','visiteArr','x','arr','arr1'])
</script>

<style scoped>
.header {
    position: relative;
}

.right {
    position: absolute;
    top: 5px;
    right: 0px;
}

.right span {
    margin: 0 10px;
}

ul{
    list-style: none;
}

li{
    font-size: 12px;
    margin-top: 28px;
    display: flex;
    justify-content: space-between;
}
li span:nth-child(1){
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}
li span.active{
    border-radius: 50%;
    background: black;
    color: white;
}
</style>